{% extends "auth.html" %}

{% block regular_content %}
<div>
    <button class="back-btn" id="go_back_button" data-cy="go_back_button" onclick="window.open('/for-teachers/class/{{ current_class.id }}', '_self');">
        <span class="fa fa-arrow-{% if g.dir == "ltr" %}left{% else %}right{% endif %}">&nbsp;</span>
        {{_('go_back')}}
    </button>
    <h2 id="create_accounts_title">{{_('create_student_accounts')}} {{current_class.name}}</h2>
    <h2 id="accounts_results_title" class="hidden">{{_('student_accounts_created')}}</h2>
    <div>
        <form id="accounts_form"
              onsubmit="hedyApp.createAccounts('{{_('create_accounts_prompt')}}');event.preventDefault();">

            <div class="border rounded-lg px-20 py-2">
                <div class="flex flex-row mt-4">
                    <div class="ltr:ml-auto flex flex-row items-center gap-2">
                        <label for="passwords_toggle" class="flex flex-row items-center justify-center cursor-pointer">
                            <div class="relative">
                                <input id="passwords_toggle" type="checkbox" onclick="hedyApp.toggleAutoGeneratePasswords()" class="sr-only" checked/>
                                <div class="w-10 h-4 bg-gray-400 rounded-full shadow-inner" id="dev_toggle"></div>
                                <div class="toggle-circle absolute w-6 h-6 bg-white rounded-full shadow ltr:-left-1 rtl:-right-1 -top-1 transition" data-cy="toggle_circle"></div>
                            </div>
                            <div id="passwords_toggle_checked_text" class="ltr:ml-3 rtl:mr-3">{{_('use_generated_passwords')}}</div>
                            <div id="passwords_toggle_unchecked_text" class="ltr:ml-3 rtl:mr-3 hidden">{{_('use_custom_passwords')}}</div>
                        </label>
                    </div>
                </div>
                <div class="flex flex-row w-full gap-4 mt-4 items-center">
                    <h3 class="w-full my-0 py-0">
                        <span id="usernames_title" class="w-full my-0 py-0">{{_('create_usernames_title')}}</span>
                        <span id="passwords_title" class="w-full my-0 py-0 hidden">{{_('create_usernames_and_passwords_title')}}</span>
                    </h3>
                </div>
                <div class="flex flex-row w-full mb-4 mt-2 gap-4 items-center">
                    <span class="w-full my-0 py-0">
                        <span id="usernames_desc">{{_('create_usernames_desc')}}</span>
                        <span id="passwords_desc" class="hidden">{{_('create_usernames_and_passwords_desc')}}</span>
                    </span>
                </div>
                <div class="flex flex-row">
                    <textarea id="accounts_input" data-cy="create_accounts_input" cols="40" rows="7" placeholder="{{_('create_accounts_placeholder')}}"
                              required class="usernames_input w-full block appearance-none bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 ltr:pr-8 rtl:pl-8 rounded"></textarea>
                    <input id="classes" name="class" value="{{current_class.id}}" disabled hidden>
                </div>
                <div class="flex flex-row mt-4">
                    <div class="ltr:ml-auto flex flex-row items-center gap-2">
                      <button id="create_accounts_submit" type="submit" data-cy="create_accounts_button"
                              class="blue-btn px-4">{{_('create_accounts')}}</button>
                    </div>
                </div>
            </div>
        </form>

        <div id="accounts_results" class="gap-4 mt-4 items-center hidden">
            <div class="flex flex-row gap-4">
                <button id="copy_accounts" class="blue-btn px-4 mb-3" onclick="hedyApp.copyAccountsToClipboard('{{_('copy_clipboard')}}')">
                  {{_('copy_accounts_to_clipboard')}}
                </button>
                <button id="print_accounts" class="blue-btn px-4 mb-3"
                        onclick="hedyApp.printAccounts('{{_('print_accounts_title')}}')">
                  {{_('print_accounts')}}
                </button>
            </div>
            <table id="accounts_table" data-cy="create_accounts_output" class="border border-gray-400">
                <tr class="bg-blue-300 text-blue-900">
                    <th class="px-10 py-2 text-center">{{_('website')}}</th>
                    <th class="px-10 py-2 text-center">{{_('username')}}</th>
                    <th class="px-10 py-2 text-center">{{_('password')}}</th>
                </tr>
            </table>
        </div>
    </div>
</div>
{% endblock %}
